<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <title>用户操作</title>
    <link rel="stylesheet" href="css/elementui.css">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <style>
        .loginToHome {
            position: absolute;
            left: 0px;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 400px;
            height: 260px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            background: #fff;
            border: 1px solid #dcdfe6;
        }

        .loginForm {
            text-align: center;
            padding-top: 15px;
            padding-right: 30px;
            top: 10px;
        }

        .homeBut {
            position: absolute;
            left: 0px;
        }

        .loginBut {
            position: absolute;
            right: 0px;
        }
    </style>
</head>

<body>

<div id="login">
    <div class="loginToHome">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" status-icon label-width="80px" class="loginForm">
            <h3>登陆</h3>
            <el-form-item label="用户名" prop="name">
                <el-input type="text" v-model="ruleForm.name" auto-complete="off" placeholder="请输入用户名"></el-input>
            </el-form-item>

            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="ruleForm.password" auto-complete="off"
                          placeholder="请输入密码"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button class="homeBut" type="primary" plain @click="submitForm('ruleForm')" :loading="logining">登录
                </el-button>
                <el-button class="loginBut" type="primary" plain @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>

</div>


</body>
<!--引入组件库-->
<script src="js/vue.js"></script>
<script src="js/elementui.js"></script>
<script src="js/axios.js"></script>
<script>
    var app = new Vue({
        el: '#login',
        data: {
            logining: false,
            ruleForm: {
                name: '',
                password: ''
            },
            rules: {
                name: [
                    {required: true, message: '请输入账号', trigger: 'blur'},
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                ]
            }
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    // 当按要求输入时
                    if (valid) {
                        axios.post(
                            `/userinfo/login.do`, this.ruleForm).then(response=> {   // 箭头函数否则 this.$message 报错
                                // console.log(response.data);
                                this.$message({
                                    message: response.data,
                                    // type: 'success'
                                });
                            }
                        )
                        // alert('submit!');
                        // console.log(this.ruleForm.name);
                    } else { // 必须填写的未填写，进入此代码
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //重置
            resetForm(formName) {
                this.$refs[formName].resetFields();
                console.log("ruleForm:" + this.ruleForm);
            }
        }
    })

</script>
</html>

